<template>
    <a-card>
  <div class="background-image-container">  
    <img src="../../assets/images/Backgroundimage/book.jpg" alt="background" class="background-image"/> 
    <a-card style="width: 35vw; height: 20vw; margin-left: 14vw; margin-top: 9vw; border-radius: 1vw;  position: relative; "> 
        <p style="font-size: 5vw; font-family: Times New Roman, Times, serif; font-weight: bold; text-align: center;">报名入口</p>
        <a-button type="primary" @click="showForm" style="width: 20vw; height: 4vw; border-radius: 2vw;  position: absolute;  right: 7vw; top: 9vw;">
           <p style="font-size: 2vw; ">点击报名</p>
        </a-button>
    </a-card>
  </div>  
</a-card>
</template>

<script setup>
import { router } from '/@/router';
// 跳转注意事项
const showForm = () => {
    router.push('/teachertion/note');
   
}
</script>
<style scoped>  
.background-image-container {  
  /* position: relative;   */
  width: 100%;  
  height: 79vh; /* 或指定高度 */  
  overflow: hidden;  
}  
  
.background-image {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  border-radius: 0.5vw;
  /* object-fit: cover; 或使用 contain, 取决于需求   */
  /* z-index: -1; 确保背景图在其他内容之下   */
}  
</style>